<template>
  <div class="account-container">
    <div class="box">

      <div class="form column">
        <!-- 账号 -->
        <div class="account box column">

          <div class="row" style="width: 100%;">
            <div class="text">
              账 号
            </div>
            <div class="input">
              <Input v-model.trim="user.account"
                     size="large"
                     ref="account"
                     @on-change="checkAccount"
                     @on-enter="goNext('account')"
                     clearable
                     placeholder="请输入手机号或邮箱"/>
            </div>
          </div>

          <div class="tip">
            {{ accountTip }}
          </div>
        </div>

        <!-- 密码 -->
        <div class="pwd box" style="display: flex;">

          <div class="row" style="width: 100%;">
            <div class="text">
              密 码
            </div>
            <div class="input">
              <Input v-model.trim="user.pwd"
                     size="large"
                     ref="pwd"
                     type="password"
                     @on-blur="checkPwd"
                     @on-enter="goNext('pwd')"
                     clearable
                     placeholder="请输入密码"/>
            </div>
          </div>

          <div class="tip">
            {{ pwdTip }}
          </div>
        </div>

        <!-- 按钮 -->
        <div class="btn" @click="login">
          登录
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  //组件名称
  name: "Account",
  props: [],
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      user: {
        account: "",
        iphoneNo: "",
        email: "",
        pwd: "",
      },
      accountTip: "",
      pwdTip: ""
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    goNext(tab) {
      switch (tab) {
        case "account":
          this.$refs.pwd.focus({
            end: true
          })
          break;
        case "pwd":
          this.login()
          break;
      }
    },
    checkAccount() {
      let account = this.user.account;
      let b = this.check.isNull(account);
      if (b) {
        this.accountTip = "账号不能为空"
        return false
      } else {
        this.accountTip = ""
        let b1 = this.check.isPhoneNo(account);
        if (b1) {  //true
          this.user.iphoneNo = account
        }
        let b2 = this.check.isEmail(account);
        if (b2) {  //true
          this.user.email = account
        }
        if (!b1 && !b2) {
          this.accountTip = "请输入合法的手机号或邮箱账号"
          return false
        }
        return true
      }
    },
    checkPwd() {
      let pwd = this.user.pwd;
      let b = this.check.isNull(pwd);
      if (b) {
        this.pwdTip = "密码不能为空"
        return false
      }
      return true
    },
    //登录
    login() {
      this.accountTip = ""
      this.pwdTip = ""
      let b = this.checkAccount();
      let b1 = this.checkPwd();
      if (!b || !b1) {
        return false;
      }
      let data = {
        pwd: this.MD5(this.user.pwd),
        account: this.user.account
      }
      if (this.check.isPhoneNo(data.account)) {
        data.iphoneNo = this.user.iphoneNo
      } else if (this.check.isEmail(data.account)) {
        data.email = this.user.email
      }
      this.axios.post('/login-web/login/user/account', data)
          .then((data) => {
            if (data.code == 10004) {
              this.accountTip = data.msg
              this.pwdTip = data.msg
            }
            if (data.code == 200) { //登录成功
                this.success(data.data);
            }
          })
    },
    success(data){
      /**
       * 将用户信息保存到本地
       */
      let isLogin = true;
      let userId = data.userInfo.userId;
      let token = data.token;
      let userInfo = {
        userId: data.userInfo.userId,
        userName: data.userInfo.userName,
        userNickName: data.userInfo.userNickName,
        iphoneNo: data.userInfo.iphoneNo,
        email: data.userInfo.email,
        headPortraitUrl: data.userInfo.headPortraitUrl,
        status: data.userInfo.status,
        createTime: data.userInfo.createTime,
      }
      let userStringify = JSON.stringify(userInfo);

      //保存到 LocalStorage
      window.localStorage.setItem("isLogin", isLogin);
      window.localStorage.setItem("userId", userId);
      window.localStorage.setItem("token", token);
      window.localStorage.setItem("userStringify", userStringify);

      //保存到 SessionStorage
      window.sessionStorage.setItem("isLogin", isLogin);
      window.sessionStorage.setItem("userId", userId);
      window.sessionStorage.setItem("token", token);
      window.sessionStorage.setItem("userStringify", userStringify);

      //保存到 Vuex
      this.$store.commit('setIsLogin', isLogin)
      this.$store.commit('setUserId', userId)
      this.$store.commit('setToken', token)
      this.$store.commit('setUserInfo', userInfo)

      // console.log("登录成功");
      // console.log(this.$store.state);

      /**
       * 跳转首页
       */
      this.$router.push("/");
    }
  },
  //钩子函数
  mounted() {
    this.bus.$on("my-event-iphone-no", (iphoneNo) => {
      this.user.account = iphoneNo
    })
  }
}
</script>

<style lang="less" scoped>
.account-container {
  margin: 20px auto;
}

.form {
  .box {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
  }

  .text {
    width: 70px;
    line-height: 40px;
    height: 40px;
    text-align: right;
    padding-right: 15px;
  }

  .input {
    width: 280px;
  }

  .tip {
    font-size: 12px;
    color: #F00;
    height: 14px;
    line-height: 14px;
    margin: 2px 0px 0px 70px;
  }

  .btn {
    cursor: pointer;
    width: 280px;
    margin-left: 70px;
    text-align: center;
    font-size: 22px;
    font-weight: bolder;
    color: #FFF;
    background-color: #28c173;
    height: 40px;
    line-height: 40px;
    border-radius: 6px;
  }
}

.column {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}
</style>